<template>
  <div>
    <title-panel />
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-cell :border="false" class="btnfrom">
        <van-field
          class="fromInput"
          readonly
          clickable
          name="EarLable"
          label="耳标号"
          :value="obj.EarLable"
          required
          label-width="30%"
          placeholder="点击选择"
          is-link
          input-align="right"
          :rules="[{ required: true, message: '请选择耳标号' }]"
          @click="chooseEarLabel"
        />
        <van-button native-type="button" plain color="#37B5B5" class="addbtn" @click="scanClick()" type="primary"
          >扫一扫</van-button
        >
      </van-cell>

       <van-field readonly v-model="obj.preventionNo" name="obj" label="畜禽标识编号" required input-align="right" />

      <van-field
        readonly
        :value="obj.recordTime"
        name="detectionTime"
        label="记录日期"
        placeholder="请选择时间"
        input-align="right"
        required
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择记录日期' }]"
      />
      <van-popup v-if="!isDisabled" v-model="showPicker1" position="bottom">
        <van-datetime-picker
          type="date"
          v-model="currentDate"
          @confirm="onConfirmStartDate"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-field
        v-model="obj.weight"
        name="weight"
        label="体重 (kg)"
        required
        placeholder="点击填写,保留一位小数"
        input-align="right"
        :rules="[{ validator: validTest, required: true, message: '请填写体重,保留一位小数' }]"
      />
      <van-field
        v-model="obj.height"
        name="height"
        label="体高 (cm)"
        required
        placeholder="点击填写,保留一位小数"
        input-align="right"
        :rules="[{ validator: validTest, required: true, message: '请填写体高,保留一位小数' }]"
      />
      <van-field
        v-model="obj.XieHeight"
        name="XieHeight"
        label="体斜长 (cm)"
        placeholder="点击填写,保留一位小数"
        input-align="right"
      />
      <van-field
        v-model="obj.shiZiHeight"
        name="shiZiHeight"
        label="十字部高 (cm)"
        placeholder="点击填写,保留一位小数"
        input-align="right"
        label-width="120px"
      />
      <van-field
        v-model="obj.bust"
        name="bust"
        label="胸围 (cm)"
        placeholder="点击填写,保留一位小数"
        input-align="right"
      />
      <van-field
        :border="false"
        v-model="obj.guanWei"
        name="guanWei"
        label="管围 (cm)"
        placeholder="点击填写,保留一位小数"
        input-align="right"
      />

      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell
} from 'vant'
import UploadImg from '@/components/uploadImg'
import TitlePanel from '@/components/titlePanel'
import dayjs from 'dayjs'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { getHandle, postHandle } from '../../api'
export default {
  components: {
    UploadImg,
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      currentDate: new Date(),
      showPicker1: false,
      loading: false,
      isDisabled: false,
      obj: {
        EarLable: getValue('earTag2d') ? JSON.parse(getValue('earTag2d')).earLabelNo : '',
        preventionNo:getValue('earTag2d') ? JSON.parse(getValue('earTag2d')).preventionNo : '',
        recordTime: dayjs(new Date()).format('YYYY-MM-DD'),
        weight: null,
        height: null,
        XieHeight: null,
        shiZiHeight: null,
        bust: null,
        guanWei: null
      },
      type: null
    }
  },
  created() {},
  mounted() {
    this.$bridge.register('backScanData', data => {
      if (JSON.parse(data).individualId) {
        let obj = {
          earLabelNo: JSON.parse(data).earLabelNo,
          preventionNo: JSON.parse(data).preventionNo,
          id: JSON.parse(data).individualId
        }
        setValue('earTag2d', JSON.stringify(obj))
        this.obj.EarLable = JSON.parse(data).earLabelNo
        this.obj.preventionNo = JSON.parse(data).preventionNo

      } else {
        Toast('羊只信息未录入')
        return
      }
    })
    this.$bridge.register('refresh', data => {
      if (!!getValue('earTag2d')) {
        this.obj.EarLable = getValue('earTag2d') ? JSON.parse(getValue('earTag2d')).earLabelNo : ''
                this.obj.preventionNo = getValue('earTag2d') ? JSON.parse(getValue('earTag2d')).preventionNo : ''

      }
    })
  },
  methods: {
    scanClick() {
      this.$bridge.call('base.scanOneScan')
    },

    // 定义小数一位校验规则
    validTest(valR) {
      let val = '' + valR
      console.log(val)
      let arr = val.split()
      console.log(arr)
      if (arr[0].indexOf('.') == -1) {
        return true
      }
      let arr2 = val.split('.')
      if (arr2[1].length > 1) {
        Toast('请保留一位小数')
        return false
      }
      return true
    },
    // 跳转选择耳标号
    chooseEarLabel() {
      // 新增生长记录   2级单选耳标号   在fzm.js中
      this.$bridge.call('addCheckEarTag2d')
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSubmit(value) {
      this.loading = true
      this.onSave()
      // let imgInfos = this.obj.imgInfos.map((item) => item.url).join(",");
    },
    onConfirmStartDate(val) {
      this.obj.recordTime = dayjs(val).format('YYYY-MM-DD')
      this.showPicker1 = false
    },
    onSave() {
      const params = {
        tenantCode: getValue('tenantCode'),
        subjectInfoId: getValue('subjectInfoId'),
        houseInfoId: getValue('fzmHourseId'),
        individualInfoId: getValue('earTag2d') ? JSON.parse(getValue('earTag2d')).id : '',
        earLabelNo: this.obj.EarLable,
        recordDate: this.obj.recordTime,
        weight: this.obj.weight,
        height: this.obj.height,
        obliqueLength: this.obj.XieHeight,
        crossHeight: this.obj.shiZiHeight,
        bustSize: this.obj.bust,
        tubeSize: this.obj.guanWei
      }
      postHandle('/agri/api/yzbzh/growRecord/save', params).then(res => {
        console.log(res)
        // 新增成功跳转列表页
        if (res.status == 0) {
          Toast.success('操作成功')
          // 新增成功,清除本地缓存的耳标信息
          clearValue('earTag2d')
          this.$bridge.call('base.closePage')
        } else {
          Toast.fail(res.msg || '操作失败')
        }
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 1px 0;
}
.fromInput {
  width: 86%;
}
</style>
